<template>
  <div class="container">
    <!-- 左侧菜单栏 -->
    <PostAside @sendCity="sendCity" />
    <div class="right">
      <div class="input">
        <div class="search">
          <input class="input-text" type="text" placeholder="请输入想去的地方,比如:'广州'" v-model="city" />
          <i class="el-icon-search" @click="toCity"></i>
        </div>
        <div class="text">
          推荐:
          <span
            v-for="(item,index) in ['广州','上海','北京']"
            :key="index"
            @click="searchCity(item)"
          >{{item}}</span>
        </div>
      </div>
      <!-- 文章列表-->
      <div class="post">
        <el-row class="title" type="flex" justify="space-between" align="middle">
          <h4>推荐攻略</h4>
          <!-- 写游记页面 -->
          <nuxt-link to="#">
            <button class="el-button el-button--primary">
              <i class="el-icon-edit"></i>写游记
            </button>
          </nuxt-link>
        </el-row>
        <!-- 渲染文章列表数据 -->
        <div v-for="(item,index) in dataList" :key="index">
          <PostArticle :post="item" />
        </div>
      </div>
      <!-- 分页操作 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import PostAside from "@/components/post/postAside";
import PostArticle from "@/components/post/postArticle";
export default {
  data() {
    return {
      city: "",
      dataList: [], //所有数据

      // 分页数据
      total: 0,
      pageIndex: 1,
      pageSize: 3
    };
  },
  components: {
    PostAside,
    PostArticle
  },
  methods: {
    // 子组件传来的City
    sendCity(city) {
      this.city = city;
      this.getPost();
    },
    // 点击推荐改变 city
    searchCity(city) {
      this.city = city;
      this.getPost();
    },
    // 点击搜索修改城市
    toCity() {
      if (this.city) {
        this.getPost();
      } else {
      }
    },
    // 获取文章列表
    getPost() {
      this.$axios({
        url: "/posts",
        params: {
          _start: (this.pageIndex - 1) * this.pageSize,
          _limit: this.pageSize,
          city: this.city
        }
      }).then(res => {
        // console.log(res);
        this.total = res.data.total;
        const { data } = res.data;
        // 需要处理用户头像地址
        data.forEach(e => {
          if (e.account.defaultAvatar.indexOf("http") < 0) {
            e.account.defaultAvatar =
              this.$axios.defaults.baseURL + e.account.defaultAvatar;
          }
        });
        this.dataList = data;
        // console.log(this.dataList);
      });
    },
    // 获取文章没有城市列表
    getPostNoCity() {
      this.$axios({
        url: "/posts",
        params: {
          _start: (this.pageIndex - 1) * this.pageSize,
          _limit: this.pageSize
        }
      }).then(res => {
        this.total = res.data.total;
        const { data } = res.data;
        // 需要处理用户头像地址
        data.forEach(e => {
          if (e.account.defaultAvatar.indexOf("http") < 0) {
            e.account.defaultAvatar =
              this.$axios.defaults.baseURL + e.account.defaultAvatar;
          }
        });
        this.dataList = data;
      });
    },
    // 改变每页显示多少条
    handleSizeChange(val) {
      this.pageSize = val;
      if (this.city) {
        this.getPost();
      } else {
        ths.getPostNoCity();
      }
    },
    // 切换页数
    handleCurrentChange(val) {
      this.pageIndex = val;
      if (this.city) {
        this.getPost();
      } else {
        this.getPostNoCity();
      }
    }
  },
  mounted() {
    this.getPostNoCity();
  }
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: auto;
  padding: 20px 0;
  .right {
    width: 700px;
    .search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      height: 40px;
      line-height: 40px;
      border: 3px solid orange;
      .input-text {
        flex: 1;
        padding: 0 20px;
        line-height: 40px;
        outline: none;
        border: none;
        background: none;
      }
      .el-icon-search {
        font-size: 24px;
        color: orange;
        font-weight: 700;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .text {
      padding: 10px 0;
      font-size: 12px;
      color: #666;
      span {
        margin-left: 8px;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
          color: orange;
        }
      }
    }
    .post {
      .title {
        width: 100%;
        height: 51px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        .el-icon-edit {
          margin-right: 8px;
        }
        h4 {
          font-weight: normal;
          font-size: 18px;
          color: orange;
          &::after {
            display: block;
            content: "";
            width: 72px;
            height: 2px;
            background: orange;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }
}
</style>